ComponentOne UWP Edition
Basic Library Overview / GridSplitter for UWP / GridSplitter for UWP Quick Start
GridSplitter for UWP Quick Start

In this Quick Start, you create a new Universal Windows application in Visual Studio, set up a Grid, and add the C1GridSplitter control to your application.

Complete these steps:

  1. Create a new Universal Windows application in Visual Studio:
    1. Select File | New | Project from the File menu. The New Project dialog box will open.
    2. Select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows).
    3. Give your project a Name, and select OK. Your new project will open.
  2. Locate the References folder in the Solution Explorer. Right-click the folder and select Add Reference.
    1. In the Reference Manager, expand Universal Windows and select Extensions; you should see the UWP assemblies in the center pane.
    2. Select C1.UWP.dll from the center pane.
    3. Select OK to add the reference to your application.
  3. Locate the <Grid> </Grid> tags in your MainPage.xaml file. 
  4. Add the following Grid.RowDefinitions and Grid.ColumnDefinitions to your application. The XAML markup should resemble the following:
XAML
Copy Code 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

</Grid>
  1. Place your cursor below the closing </Grid.ColumnDefinition> tag. Locate the C1GridSplitter control in your Visual Studio Toolbox, and add two C1GridSplitter controls to your application.
  2. Edit your GridSplitter controls so that they resemble the following XAML markup:
XAML
Copy Code 
<c1:C1GridSplitter Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Top" Height="16" ShowsPreview="True" />
<c1:C1GridSplitter Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Left" Width="16" />

Note that you set the Grid Row and Column positions and the Vertical or Horizontal Alignment.

  1. Directly below the second C1GridSplitter control, add a general Rectangle control from your Toolbox and set the Fill property to "Red":
XAML
Copy Code 
<Rectangle Fill="Red"/>
  1. Press F5 or start debugging to run your application. Moving the horizontal and vertical GridSplitters will enlarge or minimize the red Rectangle: